<template>
  <div>
    <div class="top_parent">
      <img src="../../assets/image/column/cosult_banner.png" alt />
      <div class="bread">
        <p>
          <router-link to="/">首页</router-link>》
          <span>征集</span>
        </p>
      </div>
    </div>
    <div class="big">
      <div>
        <p class="zuanzeng_niandu">
          <span>年度捐赠计划,征集成果</span>
          <span @click="zhengjimore" class="more">查看更多</span>
        </p>
        <ul class="table">
          <li v-for="(item, index) of table" :key="index" @click="toDetail(item.id)">
            <span>{{ item.title }}</span>
            <span>2020-08-23</span>
          </li>
        </ul>
      </div>
      <div class="bg_zj" @click="tankuang()">我要捐赠</div>
      <div class="tankuang_bg">
        <el-dialog :visible.sync="dialogTableVisible" :center="true">
          <div class="gerenxinxi">
            <ul>
              <li style="margin-bottom:40px;text-align:center;font-size:24px">发布留言</li>
              <li>
                <span class="person_name">
                  <label for>姓&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;</label>
                  <input type="text" v-model="name" disabled="disabled" />
                </span>
                <span class="person_mobile">
                  <label for>电&nbsp;&nbsp;&nbsp;&nbsp;话:&nbsp;&nbsp;</label>
                  <input type="text" v-model="mobile" disabled="disabled" />
                </span>
                <span class="person_sfz">
                  <label for>身份证:&nbsp;&nbsp;</label>
                  <input type="text" v-model="sfz" disabled="disabled" />
                </span>
                <span class="person_mail">
                  <label for>邮&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;</label>
                  <input type="text" v-model="mail" disabled="disabled" />
                </span>
                <span class="zuanzeng_biaoti">
                  <label for>标&nbsp;&nbsp;&nbsp;&nbsp;题:&nbsp;&nbsp;</label>
                  <input type="text" v-model="mingcheng" />
                </span>
                <span class="zuanzeng_name">
                  <label for>内&nbsp;&nbsp;&nbsp;&nbsp;容:&nbsp;&nbsp;</label>
                  <textarea type="text" v-model="content" style="width:410px;height:100px"></textarea>
                </span>
                <span class="zuanzeng_name">
                  <label for>验证码&nbsp;&nbsp;&nbsp;&nbsp;</label>
                  <input type="text" style="width:90px;height:30px;" v-model="oldYzm" />
                  <yanzm @yzmChild="yzmChild" ref="yzm_child"></yanzm>
                </span>
              </li>
            </ul>
            <div class="btn">
              <p @click="clean">重置</p>
              <p @click="submit">提交</p>
            </div>
          </div>
        </el-dialog>
      </div>
      <p class="zuanzeng_title">征集捐赠</p>
      <ul class="talk">
        <li v-for="(item, index) of currentPageData" :key="index">
          <p class="title">
            <span>标题:</span>
            <span>{{ item.title }}</span>
          </p>
          <p class="content">
            <span>正文:</span>
            <span>{{ item.content }}</span>
          </p>
          <p class="man">
            <span>管理员:</span>
            <span>{{ item.answer }}</span>
          </p>
        </li>
      </ul>
    </div>
    <div id="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :pager-count="5"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="this.productList.length"
      ></el-pagination>
    </div>
    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
import { mapState, mapActions } from "vuex";
import yanzm from "../demon/yanzm";
export default {
  data() {
    return {
      codeList: [],
      oldYzm: "",
      getYzm: "",
      mingcheng: "",
      content: "",
      name: "",
      mail: "",
      mobile: "",
      zhiye: "",
      yzm: "",
      sfz: "",
      table: [],
      zj: [
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
      ],
      content: null,
      dialogTableVisible: false,
      dialogFormVisible: false,

      list: [1, 2, 3],
      newxx: [{}],
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 10, // 每页显示数量
      currentPageData: [], //当前页显示内容
    };
  },
  components: {
    foot2: foot2,
    yanzm: yanzm,
  },
  mounted() {
    this.setCurrentPageData();
    this.person();

    this.listTable();
  },
  methods: {
    ...mapActions(["isShow", "isHide"]),
    toDetail(id) {
      this.$router
        .push({
          path: `/zhengjiMoreDetail?id=${id}`,
          query: { orderId: "征集捐赠", sort: 58 },
        })
        .catch((err) => {
          err;
        });
    },
    //列表
    listTable() {
      this.$api.get(`${this.tableList}zhengjijuanzeng-1-10`).then((res) => {
        this.table = res.data.page.list;
      });
    },
    // 征集列表
    zhengjimore() {
      this.$router
        .push({
          path: `/zhengjiMore`,
        })
        .catch((err) => {
          err;
        });
    },

    // 个人信息的渲染
    person() {
      this.$api.post(this.zs + "/live/user/info").then((res) => {
        // console.log(res)
        this.mobile = res.data.data.mobile;
        this.name = res.data.data.name;
        this.sfz = res.data.data.idttNo;
        this.mail = res.data.data.email;
        this.zhiye = res.data.data.zhiye;
      });
    },
    //yanzm子组件
    yzmChild(val) {
      console.log(val);
      this.getYzm = val;
    },
    clean() {
      this.content = "";
      this.mingcheng = "";
      this.oldYzm = "";
    },
    submit() {
      let mingcheng = this.mingcheng;
      let content = this.content;
      let oldYzm = this.oldYzm;

      // let num = /^[1]([3-9])[0-9]{9}$/;
      // let sfz_num = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
      // let mail_num = /^[A-Za-z0-9-._]+@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,6})$/;
      if (!content || !mingcheng || !oldYzm) {
        this.$message({
          message: "内容不能为空",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        return;
      }
      if (oldYzm.toLowerCase() != this.getYzm.toLowerCase()) {
        this.$message({
          message: "验证码输入错误",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        this.oldYzm = "";
        this.$refs.yzm_child.createdCode();
        return;
      }
      this.$api
        .post(
          this.zs +
            "/zhengji/create?title=" +
            mingcheng +
            "&content=" +
            content +
            ""
        )
        .then((res) => {
          if (res.data.code == "OK") {
            this.yzm = "";
            this.mingcheng = "";
            this.content = "";
            this.oldYzm = "";
            this.$refs.yzm_child.createdCode();
            this.dialogTableVisible = false;
            this.$message({
              message: "提交成功",
              type: "success",
              duration: 1000,
              offset: 320,
            });
          }
        });
    },

    tankuang(index) {
      this.xiabiao = index;
      this.content = "";
      this.oldYzm = "";
      this.mingcheng = "";

      this.$api.post(`${this.zs}/live/user/info`).then((res) => {
        if (res.data.code == "UnLogin") {
          this.$message({
            message: "请先登录",
            type: "error",
            duration: 1000,
            offset: 320,
          });
          this.isShow();
        } else {
          this.dialogTableVisible = true;
        }
      });
      this.person();
    },
    setCurrentPageData() {
      this.$api.get(`${this.zs}/zhengji/page?pageSize=1000000`).then((res) => {
        // 计算一共有几页

        this.totalPage = Math.ceil(this.productList.length / this.pageSize);

        // 计算得0时设置为1
        this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
        this.productList = res.data.data.list;
        let begin = (this.currentPage - 1) * this.pageSize;
        let end = this.currentPage * this.pageSize;
        //当前页的数据等于
        this.currentPageData = this.productList.slice(begin, end);
      });
    },
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
      }
      // this.page = val;
      this.setCurrentPageData(this.zs + "/zhengji/page?pageSize=1000000");
    },
  },
};
</script>
<style scoped>
a {
  text-decoration: none;
  color: #6e6e6e;
}
li,
ul,
hr,
p,
h3 {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
.bg_zj {
  background: url("../../assets/image/zhengji/zj.png") no-repeat;
  height: 65px;
  color: red;
  font-size: 24px;
  text-align: center;
  line-height: 65px;
  margin-bottom: 60px;
  cursor: pointer;
}
.big {
  width: 1200px;
  margin: auto;
}
.more {
  cursor: pointer;
}
.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
a {
  text-decoration: none;
  color: #6e6e6e;
}

.table li {
  box-sizing: border-box;
  padding: 20px 20px 12px;
  display: flex;
  color: #999;
  justify-content: space-between;
  border-bottom: 1px solid #999999;
  cursor: pointer;
}
.table {
  margin-bottom: 60px;
}
.zuanzeng_title,
.zuanzeng_niandu {
  background: #f7f7f7;
  color: #333333;
  height: 40px;
  font-size: 24px;
  line-height: 40px;
  margin-bottom: 40px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}
.zuanzeng_niandu {
  margin-top: 60px;
}
.zuanzeng_niandu > span:nth-child(2),
.zuanzeng_title > span:nth-child(2) {
  font-size: 18px;
}
.title,
.content,
.man {
  margin-bottom: 10px;
}
.man {
  color: #5b66f8;
}
.talk {
  margin-bottom: 80px;
}
.talk li {
  background: #f6f5f4;
  padding: 20px 24px 10px;
  line-height: 23px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.talk > li > div > span:first-child {
  width: 63px;
}
.talk > li > div > span:nth-child(2) {
  width: 900px;
}

/* kuang */
.gerenxinxi {
  width: 369px;
  margin: auto;
}
.tankuang_bg >>> .el-dialog {
  width: 575px;
}

.zuanzeng_content {
  display: flex;
}
.zuanzeng_biaoti,
.zuanzeng_name {
  font-size: 20px;
  display: flex;
  margin-bottom: 20px;
}

.zuanzeng_biaoti input {
  width: 410px;
  height: 35px;
}
.zuanzeng_name input {
  width: 410px;
  height: 115px;
  margin-bottom: 20px;
}

.person {
  box-sizing: border-box;
  padding-bottom: 10px;
  color: #333333;
  font-weight: 500;
  font-size: 24px;
  border-bottom: 3px solid #999999;
  margin-bottom: 40px;
}

.person_name input,
.person_mail input,
.person_mobile input,
.person_zhiye input,
.person_sfz input {
  height: 35px;
  width: 450px;

  background: #dadada;
  outline: none;
  border: none;
  box-sizing: border-box;
  padding-left: 20px;
}
.person_yzm input {
  width: 108px;
  height: 35px;
  margin-right: 20px;
}
.person_name label,
.person_mail label,
.person_mobile label,
.person_zhiye label,
.person_sfz label,
.zuanzeng_content label,
.zuanzeng_name label,
.zuanzeng_biaoti label {
  color: #333333;
  font-size: 18px;
  width: 120px;
}

.person_name,
.person_mail,
.person_mail,
.person_mobile,
.person_zhiye,
.person_sfz {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.person_yzm {
  margin-bottom: 50px;
  display: flex;
  align-items: center;
}
.btn {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 45px;
}
.btn p {
  width: 100px;
  height: 40px;

  line-height: 40px;
}
.btn p:first-child {
  border: 1px solid #666666;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
}
.btn p:nth-child(2) {
  border: 1px solid #666666;
  border-radius: 3px;
  cursor: pointer;
  color: white;
  background: #4480f6;
  text-align: center;
}
/* fenye */
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
